<section>
  <div class="container">
    <div class="content">
      <div class="heart-rate">
        <svg
          xml:space="preserve"
          viewBox="0 0 150 73"
          height="73px"
          width="150px"
          y="0px"
          x="0px"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          version="1.0"
        >
          <polyline
            points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,
    63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
            stroke-miterlimit="10"
            stroke-width="3"
            stroke="#009B9E"
            fill="none"
          ></polyline>
        </svg>

        <div class="fade-in"></div>

        <div class="fade-out"></div>
      </div>
    </div>
  </div>
</section>

<style>
/* From Uiverse.io by vishnu1100  - Tags: button, loader, input, dark, theme, download, sign-up, stars */
/* Specific styles for .container */
.container {
  background: #e8e8e8 none repeat scroll 0 0;
  color: #999;
  font-size: 100%;
  line-height: 24px;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* Specific styles for .heart-rate container */
.container .heart-rate {
  width: 150px;
  height: 73px;
  position: relative;
  margin: 20px auto;
}

/* Styles for the fade-in animation */
.container .heart-rate .fade-in {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  top: 0;
  right: 0;
  animation: heartRateIn 2.5s linear infinite;
}

/* Styles for the fade-out animation */
.container .heart-rate .fade-out {
  position: absolute;
  width: 120%; /* Adjusted width to ensure animation space */
  height: 100%;
  background-color: #e8e8e8;
  top: 0;
  right: -120%;
  animation: heartRateOut 2.5s linear infinite;
}

/* Keyframes for the heartRateIn animation */
@keyframes heartRateIn {
  0% {
    width: 100%;
  }
  50% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

/* Keyframes for the heartRateOut animation */
@keyframes heartRateOut {
  0% {
    left: -120%;
  }
  30% {
    left: -120%;
  }
  100% {
    left: 0;
  }
}

</style>
    